<!-- 我的弹窗 -->

<template>
  <WebModal confirm="保存" medium :onSubmit="toSave">
    <WebForm word6>
      <ModalVideo class="quar" :one="one" :video="videoDevice" :visible="visible" @bind="bindVideo" />
      <MyDetail class="quar3" />
    </WebForm>
  </WebModal>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import FooterEdit from '@admin/views/System/IOT/IOTList/MyModal/FooterEdit'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyModal',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(
    require.context('../../components', true, /vue$/),
    require.context('./', true, /vue$/),
  ),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 视频设备
     */
    videoDevice() {
      const { bindVideoId: id, bindVideoName: deviceName } = this.one
      return id ? { id, deviceName } : null
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    ...FooterEdit.methods,

    /**
     * 绑定视频
     */
    bindVideo(video) {
      this.one.bindVideoId = video ? video.id : ''
      this.one.bindVideoName = video ? video.deviceName : ''
    },
  },
}
</script>
